<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        .box {
            position: absolute;
            left: 300px;
            top: 300px;
            transform: rotateX(-45deg) rotateY(45deg);
            transform-style: preserve-3d;
        }

        .dice-wrapper {
            font-size: 2em;
            transform-style: preserve-3d;
            transform-origin: 1em 1em 1em;
            animation: rotateInfinite 5s infinite linear;
        }

        @keyframes rotateInfinite {
            0% {
                transform: rotateY(0deg);
            }
            /*25%{*/
            /*transform: rotateY(90deg) rotateZ(90deg);*/
            /*}*/
            /*50%{*/
            /*transform: rotateY(180deg) rotateZ(180deg);*/
            /*}*/
            /*75%{*/
            /*transform: rotateY(270deg) rotateZ(270deg);*/
            /*}*/
            100% {
                transform: rotateY(360deg);
            }
        }

        .dice-plane {
            background: radial-gradient(rgba(255, 100, 100, .3), rgba(255, 100, 100, .9));
            width: 2em;
            height: 2em;
            line-height: 2em;
            color: rgba(0, 0, 0, 0.3);
            text-align: center;
            border: 1px solid rgba(0, 0, 0, .1);
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            backface-visibility: hidden;
        }

        .dice-plane:nth-child(1) {
            transform: translateZ(2em);
        }

        .dice-plane:nth-child(2) {
            transform-origin: 100% 0 0;
            transform: rotateY(90deg);
        }

        .dice-plane:nth-child(3) {
            transform-origin: 0 0 0;
            transform: rotateX(90deg);
        }

        .dice-plane:nth-child(4) {
            transform-origin: 0 100% 0;
            transform: rotateX(-90deg);
        }

        .dice-plane:nth-child(5) {
            transform-origin: 0 0 0;
            transform: rotateY(-90deg);
        }

        .dice-plane:nth-child(-n+5) {
            /*display: none;*/
        }

        .dice-plane:nth-child(6) {
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
<div>一个3d旋转骰子的demo，🎲</div>
<div class="box">
    <div class="dice-wrapper">
        <div class="dice-plane">1</div>
        <div class="dice-plane">2</div>
        <div class="dice-plane">3</div>
        <div class="dice-plane">4</div>
        <div class="dice-plane">5</div>
        <div class="dice-plane">6</div>
    </div>
</div>

</body>
<script>

    // 根据前序遍历和中序遍历结果返回一个树
    class TreeNode{
        constructor(value){
            this.value = value;
            this.left = null;
            this.right = null;
        }
    }
    const prev = [1,2,4,7,3,5,6,8];
    const mid = [4,7,2,1,5,3,8,6];

    function constructTree(prev,mid) {
        const len = prev.length;
        if(len === 0){
            return null;
        }
        const node = new TreeNode(prev[0]);
        const index = mid.indexOf(prev[0]);
        node.left = constructTree(prev.slice(1,index+1), mid.slice(0,index));
        node.right = constructTree(prev.slice(index+1), mid.slice(index+1));
        return node;
    }

    const tree = constructTree(prev, mid);

    console.log(tree);

    // 返回后序遍历结果，递归版
    function postOrderTraversal(treeRoot) {
        if(treeRoot){
            return [...postOrderTraversal(treeRoot.left),...postOrderTraversal(treeRoot.right),treeRoot.value];
        }else {
            return [];
        }
    }

    console.log(postOrderTraversal(tree));

    // 双栈法，非递归后序遍历
    function postOrderTraversal2(treeRoot) {
        const output_stack = [];
        const stack = [];
        let node = treeRoot;
        while (node || stack.length!==0){
            while(node){
                output_stack.push(node);
                stack.push(node);
                node = node.right;
            }
            if(stack.length !== 0){
                node = stack.pop().left;
            }
        }
        output_stack.reverse();
        return output_stack.map(item=>item.value);
    }
    console.log(postOrderTraversal2(tree));


</script>
</html>
